// 阻止组件渲染

// 极少数情况下，你可能希望隐藏组件，即使它被其他组件渲染。让 render 方法返回 null 而不是它的渲染结果即可实现。

// tips: 组件的 render 方法返回 null 并不会影响该组件生命周期方法的回调。例如，componentWillUpdate 和 componentDidUpdate 依然可以被调用。

import React, {Component} from 'react';
import './Warning.css'

class Warning extends Component {
    constructor(props){
        super(props);
        this.state = {
            isShow: true,
        }
        this.handleToggleClick = this.handleToggleClick.bind(this);
    }
    handleToggleClick(){
        this.setState(prevState => ({
            isShow: !prevState.isShow
        }))
    }
    render(){
        return (
            <div className="show">
                <button onClick={this.handleToggleClick}>
                    {this.state.isShow ? "隐藏" : "显示"}
                </button>
                <WarningBanner isShow={this.state.isShow}/>
            </div>
        )
    }
}

class WarningBanner extends Component {
    render(){
        const isShow = this.props.isShow;
        if(!isShow){
            return null;
        }
        return (
            <div>
                我是Warning的组件。(阻止组件渲染)
            </div>
        )
    }
}

export default Warning;